﻿@page "/chart/box-and-whisker"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart'>Blazor Box and Whisker Chart</a> example visualizes the employees age group in various departments of a country with box and whisker type series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the box and whisker type chart. The box and whisker type chart is used to visualize a group of numerical data through their quartiles. It is also referred as box plot. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. <code>Marker</code> and <code>DataLabel</code> are used to represent individual data and its
        value.
    </p>
    <p>The box and whisker series mode can be changed using the <code>Mode</code> dropdown in the property panel. To display the "Mean" value in a series, enable the <code>Mean</code> checkbox on the property panel.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the box and whisker series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/box-whisker'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfChart Title="Employee Age Group in Various Department" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelIntersectAction="LabelIntersectAction.Trim" ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="10" Maximum="60" Interval="10" Title="Age">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Department" YName="Age" Name="Department" BoxPlotMode="@BoxPlotMode" ShowMean="@Mean" Type="ChartSeriesType.BoxAndWhisker">
                <ChartMarker Visible="true" Height="10" Width="10"></ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" title="Properties" style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Mode:
                        </div>
                    </td>
                    <td style="width: 50%">
                        <SfDropDownList TValue="string" Placeholder="Normal" TItem="DropDownData" DataSource="@BoxPlotModes">
                            <DropDownListFieldSettings Value="Mode"></DropDownListFieldSettings>
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeMode"></DropDownListEvents>
                        </SfDropDownList>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>Mean: </div>
                    </td>
                    <td style="width: 50%">
                        <div>
                            <SfCheckBox Checked="@Mean" ValueChange="@IsChecked" TChecked="bool"></SfCheckBox>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    private bool Mean { get; set; } = true;
    private BoxPlotMode BoxPlotMode { get; set; } = BoxPlotMode.Normal;
    public List<DropDownData> BoxPlotModes { get; set; } = new List<DropDownData>()
    {
        new DropDownData { Mode = BoxPlotMode.Normal.ToString() },
        new DropDownData { Mode = BoxPlotMode.Exclusive.ToString() },
        new DropDownData { Mode = BoxPlotMode.Inclusive.ToString() }
    };
    public List<BoxandWhiskerData> ChartPoints { get; set; } = new List<BoxandWhiskerData>
    {
        new BoxandWhiskerData { Department = "Development", Age = new double[]{ 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 }},
        new BoxandWhiskerData { Department = "Testing", Age = new double[] { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 }},
        new BoxandWhiskerData { Department = "HR", Age = new double[] { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 } },
        new BoxandWhiskerData { Department = "Finance", Age = new double[] { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 } },
        new BoxandWhiskerData { Department = "R&D", Age = new double[] { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 }},
        new BoxandWhiskerData { Department = "Sales", Age = new double[] { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 }},
        new BoxandWhiskerData { Department = "Inventory", Age = new double[] { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 }},
        new BoxandWhiskerData { Department = "Graphics", Age = new double[] { 26, 28, 29, 30, 32, 33, 35, 36, 52 }},
        new BoxandWhiskerData { Department = "Training", Age = new double[] { 28, 29, 30, 31, 32, 34, 35, 36 }}
    };

    protected override void OnInitialized()
    {
        SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        SetTheme(args);
    }

    public void ChangeMode(ChangeEventArgs<string, DropDownData> args)
    {
        BoxPlotMode = (BoxPlotMode)Enum.Parse(typeof(BoxPlotMode), args.Value.ToString(), true);
    }

    public void IsChecked(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        Mean = args.Checked;
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public class DropDownData
    {
        public string Mode { get; set; }
    }

    public class BoxandWhiskerData
    {
        public string Department { get; set; }
        public double[] Age { get; set; }
    }

}
